<script setup>
import { ref } from 'vue'

defineProps({
  msg: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: false,
    default (){
      return {
        title: '精密·可靠·耐用 做首屈一指的中国制造',
        infor: '萨尔（SAR）是一家全球领先的工业自动化和技术解决方案提供商，成立于1890年（美国），迄今已有133年的历史。一直致力于为各种行业提供创新的工业解决方案，是工业控制、自动化、制程管理以及流体控制领域的领先企业。艾默生旗下有众多品牌，阀门业务最为大众熟悉的是FISHER品牌，典型的绿色涂装',
        url: '/news/detail'
      }
    }
  }
})



const count = ref(0)
</script>

<template>
    <div class="w-full h-full flex  mobile:px-6">
        <div class="absolute w-full h-full left-0 Mask">
          <img class="wen-icon" src="../assets/image_2.jpg" alt="" srcset="">
        </div>
        <div class="w-full h-full justify-self-center flex wen-mobile-down-white">
          <div class="w-full self-center flex z-[1] mobile:block">
            <div class="w-full text-white z-10 mobile:mb-4 wow animate__animated animate__fadeInUp timing">
              <h3 class="text-5xl py-3 mobile:text-2xl leading-normal"><a class="text-white" :href="data.url">精密·可靠·耐用<br>做首屈一指的中国制造</a></h3>
            </div>
            <div class="w-full max-w-[634px] text-white z-10 self-center pl-auto mobile:pl-1 wow animate__animated animate__fadeInUp timing" data-wow-duration="0.5s" data-wow-delay="0.5s">
              <p class="text-2xl my-3 leading-[1.75] line-clamp-6 mobile:text-sm"><a class="text-white/80" :href="data.url">{{ data.infor }}</a></p>
              <div class="w-full flex mt-12 mobile:mt-8">
                <div class="w-1/3">
                  <p class="text-12 text-white text-5xl mobile:text-2xl">20000+</p>
                  <p class="text-xl text-white/60 mt-2 mobile:text-xs">平方研发生产基地</p>
                </div>
                <div class="w-1/3">
                  <p class="text-12 text-white text-5xl mobile:text-2xl">5000+</p>
                  <p class="text-xl text-white/60 mt-2 mobile:text-xs">技术解决方案</p>
                </div>
                <div class="w-1/3">
                  <p class="text-12 text-white text-5xl mobile:text-2xl">200+</p>
                  <p class="text-xl text-white/60 mt-2 mobile:text-xs">研发专利</p>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<style scoped>
</style>
